<template>
    <div id="apo">

        <div class="name">
            <div @click="div1(0)" :class="this.div ==0?Classgreen:''">我的课程</div>
            <div @click="div1(1)" :class="this.div ==1?Classgreen:''">我的微专业</div>
        </div>
        <div class="names">
            <div :class="this.div ==0?Classblo:''">
                <!--我的课程内容-->
                <div class="weikai">
                    <!--没有课程-->
                    <img src="../../../static/images/newBlank.png"/>
                    <div class="grt">未开始学习哦~</div>
                    <div class="qufa"><a href="javascript:;" >去发现值得学的课程</a></div>
                </div>
                <div>

                </div>
            </div>
            <div :class="this.div ==1?Classblo:''">
                <!--我的微专业内容-->
                <div class="weikai">
                    <!--没有微专业-->
                    <img src="../../../static/images/newBlank.png"/>
                    <div class="grt">未学习微专业哦~</div>
                    <div class="qufa"><a href="javascript:;" >去发现精彩微专业</a></div>
                </div>
                <div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
                div:0,
                Classgreen:"border",
                Classblo:"blo"
            }
		},
		methods: {
            div1:function (s) {
                this.div = s;
            }
		}
	}
</script>

<style scoped>
    .weikai{text-align: center;padding-top: 30px}
    .weikai img{width: 100px}
    .grt{
        font-size: 14px;
        color: #99a4bf;
        margin: 15px 0 30px;
    }
    .qufa>a{
        display: inline-block;
        color: white;
        background-color: #2cc17b;
        border-radius:3px;
        padding: 5px 15px;
    }
    #apo{
        padding-bottom: 50px}
    template > div {
        width: 100%
    }
    .name{
        border-bottom: 1px solid #e6eaf2;
        border-top: 1px solid #e6eaf2;
        background-color: white;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .name>div{
        font-size:16px ;
        padding: 5px;
    }
    .name>div:first-child{margin-right: 20%}
    .name>div.border{
        border-bottom: 2px solid #2CC17B;
        color:#2CC17B;
    }
    .names>div{
        display:none;
    }
    .names>div.blo{
        display:block;
    }
</style>
